<template>
    <div class="home-box">
        <Search></Search>
        <section class="content-box">
            <Banner></Banner>
            <NavList></NavList>
            <Cecil></Cecil>
            <GoodsList></GoodsList>
        </section>
        <MyFooter></MyFooter>
    </div>
</template>

<script>
import Search from "./components/Search.vue";
import Banner from "./components/Banner.vue";
import NavList from "./components/NavList.vue";
import Cecil from "./components/Cecil.vue";
import GoodsList from "./components/GoodsList.vue";
import MyFooter from "../../components/MyFooter.vue";
export default {
  name:"Home",
  components: {
    Search,
    Banner,
    NavList,
    Cecil,
    GoodsList,
    MyFooter,
  },
};
</script>

<style scoped>
.home-box{
  width: 100% !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.content-box{
  /* background-color: aquamarine; */
  flex: 1;
  /* height: 100%; */
  /* margin: .05rem 0; */
}
</style>
